<template>
  <!-- 设置判断 如果获取到 Vuex里面的state数据 再让其执行渲染工作 防止因为对象为null进行报错 -->
  <div class="item" v-if="movieInfo">
    <img :src="movieInfo.img">
    <div>
      <p>豆瓣评分：{{movieInfo.score}}</p>
      <p>产地：{{movieInfo.country}}</p>
      <p><span class="tag" :key='index' v-for='(item,index) in movieInfo.tags.split(",")'>{{item}}</span></p>
      <p>{{movieInfo.summary}}</p>
    </div>
  </div>
</template>
<script>
//! 导入Vuex的mapState 获取 Vuex的state数据
//! 导入mapActions 让Vuex获取服务器异步数据
import { mapState, mapActions } from 'vuex'
export default {
  // 在计算属性中 导入state数据
  computed: {
    // 获取服务器的state数据
    ...mapState('detail', ['movieInfo'])
  },
  methods: {
    // 让服务器 获取服务器的异步数据 并储存在Vue的state数据里面
    ...mapActions('detail', ['movieDetail'])
  },
  created () {
    //  声明周期 页面加载时候 调用异步获取Vuex方法 获取服务器数据
    this.movieDetail(this.$route.query.id) // 携带 动态路由传来的电影详情id 获取电影详情的内容
  }
}
</script>
